<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="page">
			<h1 id="header">List</h1>
			<h2>Buy groceries</h2>
			<ul>
				<li id="one" class="hot"><em>fresh</em>&nbsp;<em>figs</em></li>
				<li id="two" class="hot">pine nuts</li>
				<li id="three" class="hot">honey</li>
				<li id="four">balsamic vinegar</li>
			</ul>
			<script src="js/list.js"></script>
		</div>
		<script>
			var elems = document.querySelectorAll('#page .hot');
			for (var i = 0; i < elems.length; i += 1) {
				alert(elems[i].textContent);
			}
			var em = document.querySelector('#one>em');
			alert(em.textContent);
			
		</script>
	</body>
</html>
